<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/echarts.min.js"></script>
    <style>
        .box {
            width: 1000px;
            height: 500px;
            background-color: yellowgreen;
        }
    </style>
</head>



<body>
    <!-- 官网示例 cavas画布 -->
    <div class="box"></div>
    <script>
        var myChart = echarts.init(document.querySelector('.box'));
        // 文档 配置手册 查看相关配置
        option = {
            // 1，折线控制颜色数组和线的 数量一致
            color: ['pink', 'blue', "yellow", "red", "black"],
            // 标题
            title: {
                text: 'Stacked Line'
            },
            //,2，提示框  鼠标经过提示
            tooltip: {
                trigger: 'axis'
            },
            // 3，图例    右上角
            legend: {
                data: ['直播营销', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
            },
            // 4， 网格区域  数值是与 div区域 之间的距离
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                //当设置百分之0 溢出时  是否显示刻度标签
                containLabel: true
            },
            // 5， 保存成图片 
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            // 6，x轴
            xAxis: {
                type: 'category',
                // 对齐 刻度和文字标题方式
                // boundaryGap: false,
                boundaryGap: true,
                data: ['星期一', '星期二', '星期三', '星期四', '星期五', 'Sat', 'Sun']
            },
            // 7，y轴
            yAxis: {
                // 数据根据其他值自动生成的
                type: 'value'
            },
            //8， 系列列表 图表 的线
            series: [{
                // 名字 tooltip 和legend 显示的内容（要一致否则不显示）
                name: '直播营销',
                // 图表类型 是线性图
                type: 'line',
                // 数据堆叠  加前一个值
                //不想要数据堆叠时 改成不同的值或者都删掉
                stack: 'Total1',
                // 数据线上的点
                data: [120, 132, 101, 134, 90, 230, 210]
            }, {
                name: 'Union Ads',
                type: 'line',
                stack: 'Total2',
                data: [220, 182, 191, 234, 290, 330, 310]
            }, {
                name: 'Video Ads',
                type: 'line',
                stack: 'Total3',
                data: [150, 232, 201, 154, 190, 330, 410]
            }, {
                name: 'Direct',
                type: 'line',
                stack: 'Total4',
                data: [320, 332, 301, 334, 390, 330, 320]
            }, {
                name: 'Search Engine',
                type: 'line',
                stack: 'Total5',
                data: [820, 932, 901, 934, 1290, 1330, 1320]
            }]
        };
        myChart.setOption(option);
    </script>
</body>

</html>